在 Form 分類內提供 SelectButton 元件，用在選擇選項時使用，提供多組按鈕提供點選。

用法如下：

<script setup>
import { ref } from 'vue';

const value = ref('male');
const options = ref(['male', 'female']);
</script>

<template>
    <main class="p-6">
        <div class="card flex justify-center">
            <SelectButton v-model="value" :options="options" aria-labelledby="basic" />
        </div>
    </main>
</template>

若想更改為多選，可加上 multiple 屬性，即可變更為多選狀態，其選擇的值改以陣列紀錄。

另外可設定 optionLabel 及 optionValue。

多選寫法如下：

<script setup>
import { ref } from 'vue';

const multipleValue = ref(null);
const multipleOptions = ref([
    { name: 'Option 1', value: 1 },
    { name: 'Option 2', value: 2 },
    { name: 'Option 3', value: 3 }
]);
</script>

<template>
    <main class="p-6">
		    {{ multipleValue }}
        <div class="card flex justify-center">
            <SelectButton v-model="multipleValue" :options="multipleOptions" optionLabel="name" optionValue="value" multiple />
        </div>
    </main>
</template>

SelectButton 應用

1. 在文字對齊的編輯上，如官方文件上的範例，主要是用來說明可客製 SelectButton 的內容，更改為圖示的顯示。

2. 在有些網站上會看到可以調整文字大小的選項，也是利用 SelectButton 進行大、中、小字體的切換。

   實作如下，預設為 16 px 為「中」。在切換時調整整體網站的 fontSize。

<script setup>
const fontValue = ref(16);
const fontOptions = ref([
    { name: '小', value: 14 },
    { name: '中', value: 16 },
    { name: '大', value: 18 }
]);
const changeScale = ($event) => {
    console.log($event); // 取得 fontValue
    document.documentElement.style.fontSize = $event + 'px';
};
</script>

<template>
		<main class="p-6">
				<div class="card flex mb-3">
            <SelectButton
	            v-model="fontValue"
	            :options="fontOptions"
	            optionLabel="name"
	            optionValue="value"
	            @update:modelValue="changeScale"
	           />
        </div>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus esse quidem vero doloremque quibusdam iste! Adipisci, autem? Labore, nam illo.</p>
    </main>
</template>

參考連結：https://primevue.org/selectbutton